<!-- 定义导航条 -->
<template>
  <tn-tabbar height="200">
    <view class="nav-content" :style="{width:safeRight+'px'}">
      <view class="btn">
        <tn-icon name="left" size="40" color="#000000" @click="goBack"/>
        {{ title }}
      </view>
      <view class="slot">
        <slot></slot>
      </view>
    </view>
  </tn-tabbar>
</template>
    
<script lang='ts' setup name='my-nav'>
import { onMounted,ref } from 'vue';

const safeRight = ref(0)
onMounted(()=>{
  // 获取胶囊左边界坐标
  const { left } = uni.getMenuButtonBoundingClientRect()
  safeRight.value = left - 15
})
defineProps<{
  title?: string
}>()

function goBack(){
  uni.navigateBack({ delta: 1 })
}
</script>
    
<style scoped lang="scss">
.nav-content{
  position: fiexed;
  display: flex;
  align-items: center;
  .btn text{
    width: 40rpx;
  }
  .slot{
    flex: 1;
  }
}
</style>